<template>
  <div class="shopOrders-wrapper">
    <h1 class="mb-3">所有订单</h1>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="商家账号">
        <el-select
          v-model="queryInfo.query"
          placeholder="商家账号"
          clearable
          filterable
          @clear="fetch"
          @change="accountChange"
        >
          <el-option v-for="item in accounts" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="items"
      border
      show-summary
      :summary-method="getSummaries"
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column type="expand" label="查看订单" width="60">
        <template slot-scope="scope">
          <div class="expand-cell">
            <div class="d-flex mb-2">
              <div class="title mr-2">商品类别</div>
              <div>{{ scope.row.category }}</div>
            </div>
            <div class="d-flex">
              <div class="title mr-2">商品描述</div>
              <div v-html="scope.row.description"></div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="member_name" label="商家账号" width="110"></el-table-column>
      <el-table-column prop="order_no" label="订单号" min-width="110"></el-table-column>
      <el-table-column prop="product_id" label="商品ID" min-width="140"></el-table-column>
      <el-table-column prop="title" label="商品标题" width="120"></el-table-column>
      <el-table-column prop="orderDetail" label="订单详情" min-width="150"></el-table-column>
      <el-table-column prop="num" label="下单数量(个)" width="80"></el-table-column>
      <el-table-column prop="pay_amount" label="总价(元)" width="70"></el-table-column>
      <el-table-column prop="service_charge" label="服务费率" width="80"></el-table-column>
      <el-table-column prop="income" label="商家收入(元)" width="80"></el-table-column>
      <!-- <el-table-column prop="state" label="状态" width="50"></el-table-column>
      <el-table-column prop="notes" label="备注" width="50"></el-table-column> -->
      <el-table-column prop="createtime" label="创建时间" width="100"></el-table-column>
      <!-- <el-table-column prop="operation" label="操作" width="80"></el-table-column> -->
    </el-table>

    <!-- 分页区域 -->
    <Pagination :obj="obj" @pagination="fetch($event)" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";

export default {
  components: {
    Pagination,
  },
  data() {
    return {
      accounts: [],
      items: [],
      obj: {
        total: 0,
      },
    };
  },
  created() {
    this.fetch();
    this.getUserList();
    this.$store.commit("changeBreadcrumb", this.$route);
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        } else if (index === 9) {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = values
            .reduce((prev, curr) => {
              return prev + curr;
            }, 0)
            .toFixed(2);
          sums[index] += " 元";
          return;
        }
      });
      return sums;
    },
    search() {
      let reg = /\S/g;
      // 若输入内容为空，禁止查询
      if (!reg.test(this.queryInfo.query)) return;
      this.fetch();
    },
    async getUserList() {
      const formData = new FormData();
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      formData.append("user_type", 1);
      const { data: res } = await this.$http.post("findByPage", formData);
      if (res.code != "0") return this.$message("获取商家列表失败");
      // console.log(res, "商家列表");
      res.data.result.forEach((item) => {
        const obj = {};
        obj.value = obj.label = item.name;
        this.accounts.push(obj);
      });
    },
    accountChange(value) {
      // console.log(value);
    },
    async fetch(page) {
      if (page && page.newPage) this.queryInfo.pagenum = page.newPage;
      if (page && page.newSize) this.queryInfo.pagesize = page.newSize;

      const formData = new FormData();
      formData.append("member_name", this.queryInfo.query);
      formData.append("page", this.queryInfo.pagenum);
      formData.append("rows", this.queryInfo.pagesize);
      formData.append("order_status", 2);
      const { data: res } = await this.$http.post("findOrderByPage", formData);
      // console.log(res, "所有订单");
      if (res.code != "0") return this.$message("获取订单失败");
      const orders = res.data.result;
      orders.forEach((item) => {
        item.orderDetail = "";
        JSON.parse(item.order_method).forEach((item1) => {
          item.orderDetail += item1.name + "：" + item1.value + "； ";
        });
        item.income = (item.pay_amount * (1 - item.service_charge)).toFixed(2);
        item.category1 ? (item.category = item.category1 + " / " + item.category2) : (item.category = item.category2);
      });
      const statusList = ["待付款", "已付款", "已受理", "处理完成", "取消", "退款", "商家取消订单"];
      orders.forEach((item) => {
        item.order_status_text = statusList[+item.order_status - 1];
      });
      this.items = orders;
      this.obj.total = res.data.totalCount;
    },
  },
};
</script>
<style lang="scss">
.shopOrders-wrapper {
  .el-table {
    .cell {
      text-align: center;
    }
  }
}
</style>
